<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>item_list</title>

    <!-- Bootstrap -->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="text-center caption">
        <h2>标题</h2>
        <div class="controlBtn">
            <button class="btn btn-default" type="button" id="brandBtn">品牌管理</button>
            <button class="btn btn-default" type="button" id="keywordBtn">关键字管理</button>
        </div>
    </div>
    <div class="form-horizontal search">
        <div class="form-group ">
            <label for="platformSelect" class="col-md-1 col-xs-2 col-md-offset-3 control-label">电商平台</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="platformSelect">
                    <option th:each="p:${platforms}" th:value="${p.key}" th:text="${p.value}"/>
                </select>
            </div>
            <label for="shopType" class="col-md-1 col-xs-2 control-label">店铺类型</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="shopType">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="brandSelect" class="col-md-1 col-xs-2 col-md-offset-3 control-label">品牌</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="brandSelect">
                    <!--<option th:each="b:${brandList}" th:value="${b.id}" th:text="${b.brandName}"/>-->
                </select>
            </div>
            <label for="keywordSelect" class="col-md-1 col-xs-2 control-label">关键字</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="keywordSelect">
                    <option>请先选择品牌</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="cordonSelect" class="col-md-1 col-xs-2 col-md-offset-3 control-label">价格</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="cordonSelect1">
                    <option value="1">大于</option>
                    <option value="0">等于</option>
                    <option value="-1">小于</option>
                </select>
            </div>
            <label for="cordonSelect" class="col-md-1 col-xs-2 control-label text-center">-</label>
            <div class="col-md-2 col-xs-4">
                <select class="form-control" id="cordonSelect">
                    <option>请先选择关键字</option>
                </select>
            </div>
            <!--
            <label for="startDate" class="col-md-1 col-xs-2 control-label">开始日期</label>
            <div class="col-md-2 col-xs-4">
                <input type="text" id="startDate"/>
            </div>
            <label for="endDate" class="col-md-1 col-xs-2 control-label">结束日期</label>
            <div class="col-md-2 col-xs-4">
                <input type="text" id="endDate"/>
            </div>
            -->
        </div>
        <div class="form-group">
            <label class="col-md-1 col-xs-2 col-md-offset-3 control-label">开始日期</label>
            <div class="col-md-2 col-xs-4">
                <input class="form-control" type="text" id="startDate"/>
            </div>
            <label for="endDate" class="col-md-1 col-xs-2 control-label text-center">-</label>
            <div class="col-md-2 col-xs-4">
                <input class="form-control" type="text" id="endDate"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-2 col-xs-offset-5 text-center">
                <button class="btn btn-default" type="button" id="search">查询</button>
                <button class="btn btn-default" type="button" id="export">导出</button>
            </div>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-condensed table-bordered">
            <thead>
            <td class="text-center">序号</td>
            <td class="text-center">商品名称</td>
            <td class="text-center">店铺昵称</td>
            <td class="text-center">价格</td>
            <td class="text-center">付款数</td>
            <td class="text-center">评价数</td>
            <td class="text-center">地区</td>
            <td class="text-center">日期</td>
            <td class="text-center">链接</td>
            </thead>
            <tr>
                <td class="text-center">1</td>
                <td class="text-center">aaaaaaaaaaaaaaaaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
                <td class="text-center">aaaa</td>
            </tr>
            <tr>
                <td class="text-center">2</td>
                <td class="text-center">bbbbbbbbbbbbbbbbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
                <td class="text-center">bbbb</td>
            </tr>
            <!--
            <tr data-th-each="item:${itemList}">
                <td data-th-text="${item.id}">...</td>
                <td data-th-text="${item.itemName}">...</td>
                <td data-th-text="${item.shopName}">...</td>
                <td data-th-text="${item.price}">...</td>
                <td data-th-text="${item.saleCount}">...</td>
                <td data-th-text="${item.commentCount}">...</td>
                <td data-th-text="${item.location}">...</td>
                <td data-th-text="${item.datetime}">...</td>
                <td data-th-text="${item.url}">...</td>
            </tr>
            -->
        </table>
    </div>
</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<script type="text/javascript">
    function getBrandAjax(){
        $.ajax({
            url: "/brandAjax",
            dataType: 'json',
            success: function(result){
                $('#brandSelect').html('');
                for(let el of result) {
                    $("#brandSelect").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                }
                getKeywordAjax(result[0].id);
            }
        })
    }

    function getKeywordAjax(vbrand) {
        $.ajax({
            url: "/keyword/brandId/" + vbrand,
            dataType: 'json',
            success: function (result) {
                $('#keywordSelect').html('');
                for (let el of result) {
                    $("#keywordSelect").append("<option value='" + el.id + "'>" + el.keywordName + "</option>");
                }
                getCordonAjax(result[0].id);
            }
        })
    }

    function getCordonAjax(vkeyword) {
        $.ajax({
            url: '/keyword/id/' + vkeyword,
            dataType: 'json',
            success: function (result) {
                $('#cordonSelect').html('');
                for (let el of result) {
                    $('#cordonSelect').append("<option value='" + el.id + "'>" + el.keywordCordon + "</option>");
                }
            }
        })
    }
</script>

<script type="text/javascript">
    $(function () {
        // 页面初始化时加载
        getBrandAjax();

        // 品牌管理
        $('#brandBtn').click(function () {
            window.location.href = "/brands";
        })
        // 关键字管理
        $('#keywordBtn').click(function () {
            window.location.href = "/keywords";
        })

        //  Ajax
        $("#brandSelect").change(function () {
            getKeywordAjax($(this).val());
        })

        $("#keywordSelect").change(function () {
            getCordonAjax($(this).val());
        })
    })
</script>
</body>
</html>